<template>
    <div id="footer">
        <ul>
            <li v-for="item in menusData">
                <router-link :to="item.path" :class="{home: item.path === '/home', 'active-item': item.path === $route.path}">{{item.name}}</router-link>
            </li>
        </ul>
        
    </div>
</template>

<script setup>
import menusData from "@/store/menusData";

</script>

<style scoped>
#footer {
    width: 100%;
    height: 73px;
    position: absolute;
    left: 50%;
    bottom: 0.521vw;
    transform: translateX(-50%);
    /* transform会影响子元素的绝对定位，子元素的定位会变成相对于footer的位置,这不是想要的 */
    background: url("../assets/uiResources/footer.png");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

#footer ul .active-item {
    color: #ec9b02;
    font-size: 12px;
}

#footer ul {
    width: 28%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
    margin-top: 24px;
}

#footer ul a {
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

#footer ul li {
    color: #fff;
    cursor: pointer;
}

#footer ul a:hover {
    color: rgb(97, 89, 89);
}

#footer ul .home {
    display: inline-block;
    transform: translateY(-3px);
}
</style>
